<template>
  <div>
    <quill-editor
      @change="onEditorChange($event)"
      @blur="validQuill"
      class="quillEditor ql-editor ql-snow"
      id="blog-content"
      ref="myQuillEditor"
      v-model="text"
      :options="quillOption"
    />
    <div class="item_tag">
      <span style="float: right; margin-right: 10px; margin-bottom: -5px"
        >{{ TiLength }}/{{ limitLen }}</span
      >
    </div>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import quillConfig from "@/utils/quillConfig.js";
// toolbar标题
const titleConfig = [
  { Choice: ".ql-insertMetric", title: "跳转配置" },
  { Choice: ".ql-bold", title: "加粗" },
  { Choice: ".ql-italic", title: "斜体" },
  { Choice: ".ql-underline", title: "下划线" },
  { Choice: ".ql-header", title: "段落格式" },
  { Choice: ".ql-strike", title: "删除线" },
  { Choice: ".ql-blockquote", title: "块引用" },
  { Choice: ".ql-code", title: "插入代码" },
  { Choice: ".ql-code-block", title: "插入代码段" },
  { Choice: ".ql-font", title: "字体" },
  { Choice: ".ql-size", title: "字体大小" },
  { Choice: '.ql-list[value="ordered"]', title: "编号列表" },
  { Choice: '.ql-list[value="bullet"]', title: "项目列表" },
  { Choice: ".ql-direction", title: "文本方向" },
  { Choice: '.ql-header[value="1"]', title: "h1" },
  { Choice: '.ql-header[value="2"]', title: "h2" },
  { Choice: ".ql-align", title: "对齐方式" },
  { Choice: ".ql-color", title: "字体颜色" },
  { Choice: ".ql-background", title: "背景颜色" },
  { Choice: ".ql-image", title: "图像" },
  { Choice: ".ql-video", title: "视频" },
  { Choice: ".ql-link", title: "添加链接" },
  { Choice: ".ql-formula", title: "插入公式" },
  { Choice: ".ql-clean", title: "清除字体格式" },
  { Choice: '.ql-script[value="sub"]', title: "下标" },
  { Choice: '.ql-script[value="super"]', title: "上标" },
  { Choice: '.ql-indent[value="-1"]', title: "向左缩进" },
  { Choice: '.ql-indent[value="+1"]', title: "向右缩进" },
  { Choice: ".ql-header .ql-picker-label", title: "标题大小" },
  { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: "标题一" },
  { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: "标题二" },
  { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: "标题三" },
  { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: "标题四" },
  { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: "标题五" },
  { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: "标题六" },
  { Choice: ".ql-header .ql-picker-item:last-child", title: "标准" },
  { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: "小号" },
  { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: "大号" },
  { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: "超大号" },
  { Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },
  { Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },
  {
    Choice: '.ql-align .ql-picker-item[data-value="center"]',
    title: "居中对齐",
  },
  {
    Choice: '.ql-align .ql-picker-item[data-value="right"]',
    title: "居右对齐",
  },
  {
    Choice: '.ql-align .ql-picker-item[data-value="justify"]',
    title: "两端对齐",
  },
];
// toolbar工具栏的工具选项（默认展示全部）
const toolOptions = [
  ["bold", "italic", "underline", "strike"],
  ["blockquote", "code-block"],
  [{ header: 1 }, { header: 2 }],
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }],
  [{ indent: "-1" }, { indent: "+1" }],
  [{ direction: "rtl" }],
  // [{ 'size': ["12px",
  // "14px",
  // "16px",
  // "18px",
  // "20px",
  // "22px",
  // "24px",
  // "26px"] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }],
  [{ font: [] }],
  [{ align: [] }],
  ["clean"],
  // ['link', 'image', 'video']
];
import _ from "lodash";
export default {
  name: "comRichText",
  description: "富文本框",
  data() {
    return {
      TiLength: 0,
      text: "",
      // quillOption:quillConfig,
      quillOption: {
        placeholder: "请输入",
        theme: "snow",
        modules: {
          toolbar: toolOptions,
          clipboard: {
            matchers: [[Node.TEXT_NODE, this.handleCustomMatcher]],
          },
        },
      },
      showItem: false,
    };
  },
  components: {
    quillEditor,
  },
  props: {
    limitLen: {
      type: Number,
      default: () => 100,
    },
    content: {},
  },
  computed: {},
  mounted() {
    this.initTitle();
  },
  watch: {
    content: {
      // immediate:true,
      handler() {
        this.text = JSON.parse(
          JSON.stringify(this.content ? this.content : "")
        );
        this.TiLength = this.$refs.myQuillEditor.quill.getLength() - 1;
      },
    },
    // text: {
    //   immediate: true,
    //   deep: true,
    //   handler(val) {
    //     // this.text = JSON.parse(JSON.stringify(val))
    //     // this.TiLength = this.text.replace(/<[^>]*>|/g, "").length
    //     // setTimeout(()=>{
    //     //   if(this.TiLength>this.limitLen){
    //     //     this.$refs.myQuillEditor.quill.deleteText(this.limitLen, this.TiLength-this.limitLen)
    //     //   // this.$nextTick(()=>{
    //     //   //   this.$refs.myQuillEditor.quill.deleteText(this.limitLen, 1)
    //     //   //   this.$forceUpdate()
    //     //   // })
    //     // }
    //     // this.$emit('update:content', this.text);
    //     // })
    //   }
    // }
  },
  activated() {
    this.showItem = false;
  },
  methods: {
    handleCustomMatcher(node, Delta) {
      Delta.ops = [{ insert: node.data }];
      return Delta;
    },
    validQuill(obj) {
      let len = this.text.replace(/<[^>]*>|/g, "").trim().length;
      if (!this.text || len == 0) {
        this.showItem = true;
      } else {
        this.showItem = false;
      }
      this.$emit("blur", obj);
    },
    // 鼠标悬浮显示中文
    initTitle() {
      for (let item of titleConfig) {
        let tip = document.querySelector(".quill-editor " + item.Choice);
        if (!tip) continue;
        tip.setAttribute("title", item.title);
      }
    },
    onEditorChange(event) {
      this.showItem = false;
      if (this.text === "") {
        this.TiLength = 0;
      } else {
        this.TiLength = this.$refs.myQuillEditor.quill.getLength() - 1;
      }
      // this.$refs.myQuillEditor.quill.deleteText(this.limitLen, 1);
      if (this.TiLength > this.limitLen) {
        this.$refs.myQuillEditor.quill.deleteText(
          this.limitLen,
          this.TiLength - this.limitLen
        );
      }
      this.$emit("update:content", this.text);
    },
  },
};
</script>

<style lang="less" scoped>
.quillEditor {
  padding: 0;
  margin-top: -10px;

  /deep/ .ql-container {
    height: 330px;
  }
}

.item_tag {
  font-size: 12px;
  height: 14px;
  padding-top: 4px;
}
</style>
